import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_enjoy_plus/api/user.dart';
import 'package:flutter_enjoy_plus/utils/Toast.dart';
import 'package:flutter_enjoy_plus/utils/TokenManager.dart';
import 'package:flutter_enjoy_plus/utils/eventBus.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  Timer? _timer;
  int count = 60;
  // 手机号
  final TextEditingController _phoneController = TextEditingController();
  // 验证码
  final TextEditingController _codeController = TextEditingController();

  _getCode() async {
    if (count == 60) {
      // 判断手机号是否为空
      if (_phoneController.text.isEmpty) {
        return PrompAction.showToast('手机号不能为空');
      }
      // 判断手机号格式是否正确
      // r(原始字符串) 的作用是让字符串内的内容（尤其是 \）不被 Dart 转义，保持正则表达式的原生语法
      RegExp reg = RegExp(r'^1[3-9]\d{9}$');
      if (!reg.hasMatch(_phoneController.text)) {
        return PrompAction.showToast('手机号格式不正确');
      }
      setState(() {
        count--;
      });
      // 发送请求获取验证码
      final res = await getCodeApi({'mobile': _phoneController.text});
      // 填充验证码
      Future.delayed(const Duration(seconds: 2), () {
        _codeController.text = res['code'];
      });
      // 开启倒计时
      beginCount();
    }
  }

  @override
  void initState() {
    super.initState();
    _phoneController.text = '15800000000';
  }

  void beginCount() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (count == 0) {
        _timer?.cancel();
        count = 60;
      } else {
        count--;
      }
      // 数据更新
      setState(() {});
    });
  }

  Widget getTimerShow() {
    if (count < 60) {
      return Text('还剩$count s');
    } else {
      return const Text('获取验证码');
    }
  }

  login() async {
    // 非空校验
    if (_phoneController.text.isEmpty) {
      return PrompAction.showToast('手机号不能为空');
    }
    if (_codeController.text.isEmpty) {
      return PrompAction.showToast('验证码不能为空');
    }
    // 正则校验
    RegExp phoneReg = RegExp(r'^1[3-9]\d{9}$');
    if (!phoneReg.hasMatch(_phoneController.text)) {
      return PrompAction.showToast('手机号格式不正确');
    }
    RegExp ruleReg = RegExp(r'^\d{6}$');
    if (!ruleReg.hasMatch(_codeController.text)) {
      return PrompAction.showToast('验证码格式不正确');
    }
    // 登录
    final res = await loginApi({
      'mobile': _phoneController.text,
      'code': _codeController.text,
    });
    // 清除定时器
    _timer?.cancel();
    // 返回上一页
    Navigator.pop(context);
    /*
    token 登录凭证 时效性很短 8个小时 ~ 1天
    一旦token失效, 清除本地token. 跳转到登录页 (该体验不好, 有点差, 尤其是移动端)
    refreshToken 刷新token(令牌) 作用: 为了延长token的时效性并增加用户体验

    工作机制
    before: token -> 一旦过期 -> 立刻回到登录页 ->  清除本地数据 ->重新登录 -> 再次存储token ...

    now: token (时效性不变, 8个小时过期 不变...) -> 
        一旦过期, 不会直接回到登录页 (该体验不好)
        拿着refreshToken (一般是3~7天)去发请求 -> 获取最新的token和refreshToken -> 再次存储
        refreshToken 使用时机: token失效了,

        疑问点: 
        1. refreshToken 一旦过期怎么办, -> 没有可依赖的凭证, -> 赶紧重新登录
        2. 执行上述的过程 -> 状态码 401 ->  拦截器中 
  */
    // 存储token
    // "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY5MDE2OTI3Nzg1MTY0ODAiLCJpYXQiOjE3NDYzMjM2MTEsImV4cCI6MTc0NjM1MjQxMX0.3ZovlLdRpDtw7deffOkIK-45zhob1scSIgT2ql1eV2c"
    // "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY5MDE2OTI3Nzg1MTY0ODAiLCJ0eXBlIjoicmVmcmVzaCIsImlhdCI6MTc0NjMyMzYxMSwiZXhwIjoxNzQ2NTgyODExfQ.og0e1d_dvi_hm36Zy5IfWyZoV90ZCVWyPQ5QjjIHJVc"
    tokenManager.setToken(res['token'], refreshToken: res['refreshToken']);
    // 一旦登录成功，通知我的页面，重新获取用户信息，进行渲染
    eventBus.fire(loginEvent());
  }

  // 在页面销毁时，清除定时器 / 侦听器等
  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('登录'),
        backgroundColor: Colors.transparent,
        centerTitle: true,
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const Row(
              children: [
                Text(
                  '登录',
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                  ),
                )
              ],
            ),
            const SizedBox(height: 10),
            const Row(
              children: [
                Text(
                  '加入享+, 让生活更轻松',
                  style: TextStyle(fontSize: 15),
                )
              ],
            ),
            const SizedBox(height: 30),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: TextField(
                    controller: _phoneController,
                    decoration: const InputDecoration(
                      labelText: '手机号',
                      hintText: '请输入手机号',
                    ),
                  ),
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    shadowColor: Colors.transparent,
                    foregroundColor: const Color.fromARGB(255, 85, 145, 175),
                    minimumSize: const Size(100, 50),
                  ),
                  onPressed: () {
                    _getCode();
                  },
                  child: getTimerShow(),
                ),
              ],
            ),
            const SizedBox(height: 8),
            TextField(
              controller: _codeController,
              decoration: const InputDecoration(
                labelText: '验证码',
                hintText: '请输入6位验证码',
              ),
            ),
            const SizedBox(height: 8),
            const Row(
              children: [
                Text(
                  '未注册手机号经验证后将自动登录',
                  style: TextStyle(fontSize: 12, color: Colors.grey),
                ),
              ],
            ),
            const SizedBox(height: 50),
            Row(
              children: [
                Expanded(
                  child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                      backgroundColor: const Color.fromARGB(255, 85, 145, 175),
                      minimumSize: const Size(100, 50),
                    ),
                    onPressed: () {
                      login();
                    },
                    child: const Text(
                      '登录',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                      ),
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}
